<script setup>
import ScanningCode from "@/views/siteCodeManage/components/ScanningCode.vue";
import ArealDistribution from "@/views/siteCodeManage/components/ArealDistribution.vue";
import CenterShow from "@/views/siteCodeManage/components/CenterShow.vue";
import LocationCount from "@/views/siteCodeManage/components/LocationCount.vue";
import SiteCodeCount from "@/views/siteCodeManage/components/SiteCodeCount.vue";
</script>

<template>
  <div class="mainContent">
    <div class="part1">
      <div class="situaItem">
        <div class="situaNode"><ScanningCode /></div>
        <div class="situaNode"><ArealDistribution /></div>
      </div>
      <div class="situaItem">
        <div class="situaNode"><CenterShow /></div>
      </div>
      <div class="situaItem">
        <div class="situaNode"><LocationCount /></div>
        <div class="situaNode"><SiteCodeCount /></div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.mainContent {
  height: 86vh;
  display: flex;
  flex-direction: column;
  flex: 1;
  .part1 {
    height: 100%;
    display: flex;
    flex: 2;
    flex-direction: row;

    .situaItem {
      flex: 1;
      display: flex;
      flex-direction: column;

      .situaNode {
        flex: 1;
        margin: 0.7vh;
      }
    }
  }
}
</style>
